<template>
  <div class="login">
    <main class="login_wp">
      <header class="lodgin_header">
        <h1>BK管理系统</h1>
      </header>
      <section class="login_section">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="账号" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="记住密码" prop="delivery">
                <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handelLogin('form')" >登录</el-button>
            <el-button>清空</el-button>
            <el-link type="primary" style="margin-left:10px" :underline="false">新用户注册</el-link>
          </el-form-item>
        </el-form>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
        form: {
          name: '',
          password: '',
         },
         rules:{
           name:[
               
                {required: true,  trigger: 'blur' }
              ],
           password:[{required: true,min: 6, message: '密码至少6位', trigger: 'blur'}]
         }
    }
  },
  methods:{
    handelLogin(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
             this.$store.dispatch("user/doLogin",{form:this.form,$axios:this.$axios});
             this.$router.push("/")          
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
};
</script>

<style scoped>
.login_wp {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 500px;
  height: 350px;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  right: 50px;
  top: 100px;
}
.login_wp header,.login_wp section{
    padding: 0 20px;
}
div {
  height: 100%;
}
.login {
  height: 100%;
  width: 100%;
  background-image: url("~assets/2005938.jpg");
}
</style>